<template>
  <div class="sc">
    <el-carousel
      arrow="never"
      height="60px"
      indicator-position="none"
      ref="titlepmd"
      :autoplay="false"
      direction="vertical"
      class="titlepmditem"
    >
      <el-carousel-item>
        <div class="title">
          <h3>我的收藏夹</h3>
          <el-input class="scjname" size="mini" v-model="input" placeholder="请输入收藏夹名称"></el-input>
          <font class="renshu">共{{list.length}}个</font>
          <img src="@/assets/添加.png" title="添加收藏夹" @click="dialogVisible = true" />
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="title">
          <h3>我的收藏</h3>
          <el-input class="scjname" size="mini" v-model="input2" placeholder="请输入收藏的博客名称"></el-input>
          <font class="renshu">共{{list2.length}}篇</font>
        </div>
      </el-carousel-item>
    </el-carousel>

    <div class="block">
      <el-carousel
        arrow="never"
        height="660px"
        indicator-position="none"
        ref="carousel"
        :autoplay="false"
      >
        <el-carousel-item>
          <div class="nr" v-if="list.length>0">
            <div class="item" v-for="(item,index) in search()" :key="index">
              <h2>{{item.favorite.name}}</h2>
              <font class="fontms">{{item.favorite.miaoshu}}</font>
              <img src="@/assets/删除.png" title="删除收藏夹" @click="shanchuscj(item.favorite.id)" />
              <img
                class="imgdk"
                src="@/assets/编辑.png"
                title="编辑收藏"
                @click="bianjishoucangjia(item.favorite.id)"
              />

              <img
                class="imgdk"
                src="@/assets/打开.png"
                title="打开收藏夹"
                @click="setActiveItem(1,item.favorite.id)"
              />
              <hr />
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="nr">
            <img class="imggb" src="@/assets/关闭.png" title="返回收藏夹" @click="setActiveItem(0)" />
            <div class="shoucitem" v-for="(item,index) in search2()" :key="index">
              <h2 class="sch2" @click="dkblog(item.collect.blogid)">{{item.collect.blog.blog.title}}</h2>
              <img src="@/assets/删除.png" title="删除收藏" @click="shanchu(item.collect.id)" />
              <hr />
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <el-dialog title="创建收藏夹" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div class="xxshuru">
        <el-input
          class="name"
          placeholder="请输入收藏夹名称"
          size="small"
          v-model="inputname"
          maxlength="10"
        >
          <i slot="prefix" class="el-input__icon el-icon-tickets"></i>
        </el-input>
        <el-input
          class="name"
          placeholder="请输入收藏夹名称"
          size="small"
          v-model="inputms"
          maxlength="120"
        >
          <i slot="prefix" class="el-input__icon el-icon-edit"></i>
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="tianjia">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改收藏夹"
      :visible.sync="dialogVisiblexg"
      width="30%"
      :before-close="handleClose"
    >
      <div class="xxshuru">
        <el-input
          class="name"
          placeholder="请输入收藏夹名称"
          size="small"
          v-model="inputnamexg"
          maxlength="10"
        >
          <i slot="prefix" class="el-input__icon el-icon-tickets"></i>
        </el-input>
        <el-input
          class="name"
          placeholder="请输入收藏夹名称"
          size="small"
          v-model="inputmsxg"
          maxlength="120"
        >
          <i slot="prefix" class="el-input__icon el-icon-edit"></i>
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="shangchuxgxx()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return {
      input: "",
      list: [],
      num: 0,
      dialogVisible: false,
      inputname: "",
      inputms: "",
      list2: [],
      title: true,
      input2: "",
      inputnamexg: "",
      inputmsxg: "",
      dialogVisiblexg: false,
      scjid: 0
    };
  },
  methods: {
      shangchuxgxx(){
      this.dialogVisiblexg = !this.dialogVisiblexg;
           this.$http
        .get(this.poot + "updatefavorite/" + this.scjid+"/"+this.inputnamexg+"/"+this.inputmsxg)
        .then(response => {
          this.chushihua();
        })
        .catch(function(error) {
          console.log(error);
        });
      },
    bianjishoucangjia(id) {
      this.scjid = id;
      this.dialogVisiblexg = !this.dialogVisiblexg;
    },
    dkblog(index) {
      this.$router.push("/blog/" + index);
    },
    shanchuscj(id) {
      this.$http
        .get(this.poot + "deletefavorite/" + id)
        .then(response => {
          this.chushihua();
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    shanchu(id) {
      this.$http
        .get(this.poot + "delectcollectbyid/" + id)
        .then(response => {
          this.$http
            .get(this.poot + "selectcollectByfavoritrid/" + this.num)
            .then(response => {
              this.list2 = response.data;
              console.log(this.list2);
            })
            .catch(function(error) {
              console.log(error);
            });
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    tianjia() {
      this.$http
        .get(
          this.poot +
            "insertfavorite/" +
            this.user +
            "/" +
            this.inputname +
            "/" +
            this.inputms
        )
        .then(response => {
          this.chushihua();
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    search() {
      return this.list.filter(item => {
        if (item.favorite.name.includes(this.input)) {
          return item;
        }
      });
    },
    search2() {
      return this.list2.filter(item => {
        if (item.collect.blog.blog.title.includes(this.input2)) {
          return item;
        }
      });
    },

    handleClose(done) {
      done();
    },

    setActiveItem(index, num) {
      this.$refs.carousel.setActiveItem(index);
      this.$refs.titlepmd.setActiveItem(index);
      this.title = !this.title;
      if (index == 1) {
        this.num = num;
        this.$http
          .get(this.poot + "selectcollectByfavoritrid/" + this.num)
          .then(response => {
            this.list2 = response.data;
            console.log(this.list2);
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    },
    chushihua() {
      this.$http
        .get(this.poot + "selectfavoriteBymailbox/" + this.user)
        .then(response => {
          this.list = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  computed: {
    ...mapState(["leixing"]),
    ...mapState(["poot"]),
    ...mapState(["user"])
  },
  mounted() {
    this.chushihua();
  }
};
</script>
<style scoped>
.titlepmditem {
  margin-top: 20px;
}
.sch2 {
  width: 70%;
}
.shoucitem {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.name {
  width: 100%;
  margin-top: 20px;
}
.xxshuru {
  width: 100%;
}
.imggb {
  height: 20px;
  margin: 20px;
}
.block {
  margin-top: 20px;
}
hr {
  border: none;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-left: 20px;
  margin-right: 20px;
}
.imgdk {
  height: 20px;
}
.fontms {
  width: 350px;
}
h2 {
  color: #354b7b;
  margin: 20px;
  width: 200px;
}
.item {
  flex-wrap: wrap;
  height: 80px;
  display: flex;
  align-items: center;
}
.nr {
  height: 660px;
  width: 100%;
  background-color: #1e1e1e;
  overflow: auto;
}
.nr::-webkit-scrollbar {
  display: none;
}
img {
  height: 30px;
  margin-left: 10%;
}
.renshu {
  margin-left: 50px;
}
.scjname {
  width: 50%;
  margin-left: 30px;
}
.shoucangimg {
  height: 30px;
}
.title {
  /* margin-top: 20px; */
  background-color: #1e1e1e;
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
}
.sc {
  width: 100%;
}
h3 {
  font-size: 20px;
  color: #354b7b;
  margin-left: 20px;
}
</style>